<template>
  <drag-div>
    <div slot="left" class="m">
      <cm-scroll>
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          clearable
        ></el-input>
        <el-tree
          :data="categoryList"
          :props="categoryProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          class="filter-tree"
          :default-expanded-keys="[defaultExpandKeys]"
          :highlight-current="showTree"
          :style="maxHeight"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          default-expand-all
        >
        </el-tree>
      </cm-scroll>
    </div>
    <div slot="right" style="padding:10px;">
      <el-row>
        <box-border class="p10">
          <el-col :span="24">
            <div>
              <el-row :gutter="4">
                <el-form :inline="true">
                  <el-form-item label="关键字:">
                    <el-input
                      placeholder="请输入关键字"
                      v-model="searchDto.keywords"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="时间:">
                    <el-date-picker
                      v-model="value4"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item class="clear_item-margin-bottom">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="getPageData()"
                    >查询
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-s-open"
                      @click="clear"
                    >重置
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </div>
            <div class="table_content">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="-1"></el-tab-pane>
                <el-tab-pane
                  v-for="(item, index) in doTypes"
                  :key="index"
                  :label="item.label"
                  :name="item.keyword"
                ></el-tab-pane>
              </el-tabs>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :do-get-page-data="getPageData"
              >
                <el-table-column
                  show-overflow-tooltip
                  prop="title"
                  label="督办事项"
                  align="left"
                  width="200"
                >
                  <template slot-scope="scope">
                    <a
                      class="task_title_a"
                      @click="openReport(scope.row)"
                      v-if="!scope.row.readStatus"
                    >{{ scope.row.title }}
                      <el-badge is-dot class="dot_item"></el-badge>
                    </a>
                    <a
                      class="task_title_a"
                      @click="openReport(scope.row)"
                      v-else
                    >{{ scope.row.title }}</a
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                  <template slot-scope="scope">
                    <sz-badge
                      :value="scope.row.status | keyText('SUPERVISION_STATUS')"
                      :type="statusStyle(scope.row)"
                    ></sz-badge>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="progress"
                  label="进度"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-progress :percentage="scope.row.progress"></el-progress>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createUserName"
                  label="创建人"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="categoryName"
                  label="督办分类"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="responsiblePerson"
                  label="责任人"
                  align="center"
                  width="160"
                  show-overflow-tooltip
                >
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="linkUserName"-->
                <!--                  label="联系人"-->
                <!--                  align="center"-->
                <!--                ></el-table-column>-->
                <el-table-column
                  prop="planStartTime"
                  label="计划开始时间"
                  align="center"
                  width="120"
                >
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.planStartTime | formatTime("yyyy-MM-dd")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="planEndTime"
                  label="计划结束时间"
                  align="center"
                  width="120"
                >
                  <template slot-scope="scope">
                    <span
                      :style="{ color: thisData(scope.row) ? 'red' : '' }"
                    >{{
                        scope.row.planEndTime | formatTime("yyyy-MM-dd")
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="最近更新时间"
                  align="center"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  label="管理"
                  width="150"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="openReport(scope.row)"
                    >
                      详情
                    </el-button>
                    <el-button type="text" size="mini" @click="editSupervise(scope.row)">编辑</el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="delSupervise(scope.row)"
                    >删除
                    </el-button
                    >
                  </template>
                </el-table-column>
              </page-table>
            </div>
          </el-col>
        </box-border>
      </el-row>
    </div>
  </drag-div>
</template>
<script>
  import {mapGetters} from "vuex";
  import superviseDetail from "./superviseDetail";
  import Moment from "moment";

  export default {
    name: "mySupervise",
    created() {
      this.initData();
    },
    mounted() {
      let that = this;
      let loop = setInterval(function () {
        let tag = window.localStorage.getItem("wait");
        if (tag === "refresh") {
          clearInterval(loop);
          that.getPageData();
        }
      }, 1);
    },
    watch: {
      $route(to, from) {
        console.log(to, from);
        this.initData();
      },
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    data() {
      return {
        doTypes: this.getDictionary("SUPERVISION_STATUS"),
        value4: [],
        activeName: "-1",
        showFlowNodeHistory: false,
        defaultExpandKeys: "",
        showTree: false,
        filterText: "",
        categoryProps: {
          label: "name",
          value: "id"
        },
        categoryList: [],
        loading: false,
        searchDto: {
          categoryId: "",
          pageSize: 10,
          pageIndex: "",
          keywords: "",
          startTime: "",
          endTime: "",
          status: ""
        },
        pageData: {},
        curTaskId: "", // 当前任务id
        categoryNow: "", //当前选择左侧分类
        statusNow: "" //当前选择状态
      };
    },
    computed: {
      ...mapGetters({}),
      maxHeight() {
        return {height: this.clientHeight - 220 + "px"};
      }
    },
    methods: {
      thisData(row) {
        return new Date().getTime() >= new Date(row.planEndTime).getTime();
      },
      // 状态颜色设置
      statusStyle(row) {
        let cls = "";
        switch (row.status) {
          case "DOING":
            cls = "danger";
            break;
          case "WAIT_CONFIRM":
            cls = "warning";
            break;
          case "COMPLETED":
            cls = "success";
            break;
        }
        return cls;
      },
      initData() {
        this.searchDto.flowId = this.$route.query.flowId;
        this.getCategoryTree();
        this.getPageData();
      },
      //编辑督办
      editSupervise(row) {
        let tem = {id: row.id};
        this.$store.dispatch("getSupervisionMatter", tem).then(ret => {
          this.$router.push({
            name: 'editSupervise'
          });
        });
      },
      //分类点击事件
      handleClick(tab, event) {
        let status;
        switch (tab.paneName) {
          case "-1":
            status = "";
            break;
          default:
            status = tab.paneName;
            break;
        }
        this.searchDto = {
          categoryId: this.categoryNow,
          pageSize: 10,
          pageIndex: "",
          keywords: "",
          startTime: "",
          endTime: "",
          status: ""
        };
        this.statusNow = status;
        this.searchDto.status = this.statusNow;
        this.getPageData();
      },
      // 显示流程轨迹面板
      showFlowNode(row) {
        this.curTaskId = row.id;
        console.log(this.curTaskId);
        this.showFlowNodeHistory = true;
      },
      // 跳转任务处理
      taskEdit(row) {
        let routeData = this.$router.resolve({
          path: "/workflow/apply",
          query: {flowId: row.flowId, taskId: row.id}
        });
        this.openPage(routeData.href, "wait");
        // this.openTabPage(routeData.href);
      },
      // 获取督办类型
      getCategoryTree() {
        this.API.getCategoryTree({type: "SUPERVISE", parentId: 0}).then(res => {
          this.categoryList = [];
          if (res.data) {
            this.categoryList.push({name: "全部", id: "", children: res.data});
          }
        });
      },
      // 过滤分类
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      // 左侧分类树的单击事件
      handleNodeClick(val) {
        this.searchDto = {
          categoryId: "",
          pageSize: 10,
          pageIndex: "",
          keywords: "",
          startTime: "",
          endTime: "",
          status: this.statusNow
        };
        this.categoryNow = val.id;
        this.searchDto.categoryId = this.categoryNow;
        this.getPageData();
      },
      //  分页列表
      getPageData(val) {
        this.searchDto.startTime = "";
        this.searchDto.endTime = "";
        if (this.value4 && this.value4.length > 0) {
          this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
          this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
        }
        let tem = Object.assign(this.searchDto, val);
        this.API.getMyLaunchSupervisionMatterPageList(tem).then(res => {
          this.pageData = res.data;
          console.log(this.pageData);
          window.localStorage.setItem("wait", "");
        });
      },
      //删除
      delWorkForm(row) {
        this.$confirm("确认删除当前待办任务?", "提示", {})
          .then(() => {
            let tem = {
              id: row.id
            };
            this.API.deleteWorkflowFormById(tem).then(res => {
              this.success("删除成功");
              this.getPageData();
            });
          })
          .catch(() => {
          });
      },
      // 编辑待办任务
      editWorkForm(row) {
        let data = "/formDesign.html#/?operate=update&formId=" + row.id;
        window.open(data, "_blank");
      },
      // 汇报
      openReport(row) {
        this.$router.push({
          path: "/main/supervise/superviseReport",
          query: {matterId: row.id}
        });
      },
      // 发布待办任务
      publishWorkForm(row) {
        this.$confirm("确认发布当前待办任务?", "提示", {})
          .then(() => {
            if (row.id) {
              this.API.publishWorkflowFormById({id: row.id}).then(res => {
                this.success("发布待办任务成功!");
              });
            }
          })
          .catch(() => {
          });
      },
      // 新建待办任务
      newWorkForm() {
        let data = "/formDesign.html#/?operate=create";
        window.open(data, "_blank");
      },
      //删除督办
      delSupervise(row) {
        this.$confirm("是否确认删除当前督办事项", "提示", {}).then(() => {
          let tem = {id: row.id};
          this.API.deleteSupervisionMatterById(tem).then(() => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPageData();
          });
        });
      },
      //清空
      clear() {
        this.searchDto = {
          categoryId: "",
          pageSize: 10,
          keywords: "",
          startTime: "",
          endTime: "",
          status: ""
        };
        this.value4 = [];
        this.getPageData(1);
      }
    },
    components: {
      superviseDetail
    }
  };
</script>

<style scoped></style>
